<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
    <title>文章管理</title>
</head>

<body>
    <div id="app">
        <div class="container-fluid">
            <div class="card border-0">
                <div class="card-header bg-white">
                    <h3 class="card-title">文章添加</h3>
                </div>
                <div class="card-body">
                    <form>
                        <div class="form-group row">
                            <label for="title" class="col-form-label text-right col-2">标题：</label>
                            <input type="text" class="form-control col-9" id="title" v-model.trim="title">
                        </div>
                        <div class="form-group row">
                            <label for="category" class="col-form-label text-right col-2">类目：</label>
                            <select class="col-9 form-control" id="category" v-model="category">
                                <option value="默认">默认</option>
                                <option value="类目1">类目1</option>
                                <option value="类目2">类目2</option>
                                <option value="类目3">类目3</option>
                            </select>
                        </div>
                        <div class="form-group row">
                            <label for="content" class="col-form-label text-right col-2">内容：</label>
                            <textarea id="content" class="col-9 form-control" rows="5" v-model.trim="content"></textarea>
                        </div>
                        <div class="form-group row">
                            <label for="hot" class="col-form-label text-right col-2">热门：</label>
                            <div class="custom-control custom-switch mt-2">
                                <input type="checkbox" id="hot" class="custom-control-input" v-model="hot">
                                <label for="hot" class="custom-control-label"></label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <button type="button" class="btn btn-primary offset-2" @click="add">提交</button>
                        </div>
                    </form>
                </div>
                <div class="card-footer bg-white">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h3>文章列表</h3>
                        </li>
                        <li class="list-group-item" :class="{'bg-danger':article.hot,'text-white':article.hot}"
                            v-for="article,index in articles" :key="index">
                            <span v-if="article.hot">【热门】</span>【{{article.category}}】{{article.title}}
                            ({{article.content.substr(0,20)}})</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                articles: [
                    { title: '标题1', category: '类目1', content: '内容1', hot: false },
                    { title: '标题2', category: '类目2', content: '内容2', hot: true },
                    { title: '标题3', category: '类目3', content: '内容3', hot: false },
                ],
                title: '',
                category: '默认',
                content: '',
                hot: false
            },
            methods: {
                add() {
                    let article = { title: this.title, category: this.category, content: this.content, hot: this.hot }
                    this.articles.push(article)
                }
            },
        })
    </script>
</body>

</html>